
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <title>餐厅点餐系统 - 登录</title>
    <%--引入css文件--%>
    <link rel="stylesheet" href="./logincss/css/supersized.css">
    <script src="./logincss/js/jquery-1.8.2.min.js"></script>
    <script src="./logincss/js/supersized.3.2.7.min.js"></script>
    <script src="./logincss/js/supersized-init.js"></script>
    <script src="./js/jquery-3.5.1.min.js"></script>
    <script src="./js/jquery.validate.js"></script>
    <%--界面参数css样式--%>
    <style>
        *{
            margin: 0 auto;
            padding: 0;
        }
        /*#表示div选折器，一个页面中只能有一个唯一的*/

        /*登录狂*/
        #div1{
            text-align: center;
            width: 450px;
            height: 380px;
            background-color: rgba(256,256,256,0.7);
            position: absolute;
            top: 200px;
            right: 200px;
            border-radius: 15px;
        }

        #sp1{
            margin-top: 10px;
            font-size: 20px;
            font-weight: bold;
            color: #0074BB;
        }
        #r1{
            width: 20px;
            height: 15px;
        }


        table{
            margin-top: 30px;
            border-spacing: 5px 25px;
        }
        table tr td input{
            width: 260px;
            height: 37px;
            border: #0074BB solid;
            border-radius: 10px;
        }
        .tx1{
            color: #0074BB;
            font-size: larger;
            font-family: 黑体;
        }

        .sub{
            width: 100px;
            height: 40px;
            color: #FFFFFF;
            font-size: 14px;
            border: none;
            background-color: #0074BB;
            font-weight: bold;
            border-radius: 10px;
        }
        .sub:hover{
            background-color: #0083CB;
        }

        #sp2{
            font-size: 8px;
        }
        #sp2:hover{
            color: #111111;
        }

    </style>
</head>

<body>
<div id="div1">
    <div id="sp1">香喷喷</div>
    <p style="color: #BC0000;font-size: 10px;margin-left: 5px">
        ${errorMsg}
        ${login}
    </p>
    <form action="loginServlet" id="form2" method="post">
        <table>
            <div  id="div2" class="layui-input-block">
                <select name="role" >
                    <option value="餐厅经理">餐厅经理</option>
                    <option value="厨房主管">厨房主管</option>
                    <option value="财务管理">财务管理</option>
                    <option value="配餐员">配餐员</option>
                </select>
            </div>

            <tr>
                <td><span class="tx1">账号</span></td>
                <td><input type="text"id="n1" name="username" value="${cookie.username.value}"></td>
            </tr>
            <tr>
                <td><span class="tx1">密码</span></td>
                <td><input type="password" name="password" value="${cookie.password.value}" ></td>
            </tr>

            <tr>
                <td><span class="tx1">记住密码</span></td>
                <td><input type="checkbox" id= "r1" name="remember" value="${1}"></td>
            </tr>
            <tr>
                <td><span class="tx1">验证码</span></td>
                <td style="position: relative">
                    <input type="text" style="width: 85px;" name="checkcode" >
                    <a href="javascript:void(0)">
                        <img src="CheckCodeUtile" alt=""  onclick="sfCode()" id="codePic"
                             style="position: absolute;right: 93px;" height="35px" width="70px">
                    </a>
                    <a href="javascript:void(0)"
                       style="position: absolute;right: 0px;top: 8px;text-decoration: none;color: #0074BB">
                        <span id="sp2" onclick="sfCode()">看不清，换一张</span>
                    </a>
                    <br>
                    <p style="color: #BC0000;font-size: 10px;margin-left: 5px">
                        ${loginMsg}
                    </p>
                </td>
            </tr>
            <tr>
                <td></td>
                <td>

                    <input type="submit" value="登&nbsp;&nbsp;录" class="sub">
                    &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp
                    <a  href="register.jsp">
                    <input type="button" value="注&nbsp;&nbsp;册" class="sub">
                    </a>
                </td>
            </tr>
        </table>
    </form>
</div>
</body>

<script>
    //表单效验
    $("#form2").validate({
        rules:{
            username:{
                //表示不能为空
                required:true,
                maxlength:[11]
            },
            password:{
                required: true,
            },
            checkcode:{
                required: true,
            }
        },
        messages:{
            username:{
                required:"<span style='color: red;font-size: 12px'><br>用户名不能为空</span>",
                maxlength:"<span style='color: red;font-size: 12px'><br>账号最多不超过11位</span>"
            },
            password:{
                required:"<span style='color: red;font-size: 12px'><br>密码不能为空</span>"
            },
            checkcode:{
                required:"<span style='color: red;font-size: 12px;position: absolute;left: 5px;top 0px'><br></span>"
            }
        }
    })



    //验证码刷新函数
    function sfCode() {
        //获得图片控件，因为浏览器会抓缓存，所以要加时间戳
        $("#codePic").attr("src", "CheckCodeUtile?" + new Date().getTime())

    }

        //session显示后需要将其清空
        var loginMsg="${loginMsg}";
        var errorMsg="${errorMsg}"

        if (loginMsg!="",errorMsg!=""){
            <%
            //清空session
            session.removeAttribute("loginMsg");
            session.removeAttribute("errorMsg");
            %>
        }


</script>
</html>